<template>
  <div class="JNPF-common-layout">

    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>
          <el-col :span="6">
            <el-form-item label="来访人员姓名">
              <el-input v-model="query.visituser" placeholder="请输入" clearable> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="来访单位">
              <el-input v-model="query.visitcompany" placeholder="请输入" clearable> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="被访者姓名">
              <el-input v-model="query.calluer" placeholder="请输入" clearable> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
              <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
        <div class="JNPF-common-head">
          <!-- <div>
            <el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()">新增
            </el-button>
          </div> -->
          <div class="JNPF-common-head-right">
            <el-tooltip effect="dark" content="刷新" placement="top">
              <el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false" @click="reset()" />
            </el-tooltip>
            <screenfull isContainer />
          </div>
        </div>
        <JNPF-table v-loading="listLoading" :data="list" @sort-change='sortChange'>
          <el-table-column prop="visitname" label="来访事由" width="0" align="left" />
          <el-table-column prop="visitcompany" label="来访单位" width="0" align="left" />
          <el-table-column prop="visituser" label="来访人员姓名" width="0" align="left" />
          <el-table-column prop="idcard" label="身份证" width="0" align="left" />
          <el-table-column prop="mobile" label="来访联系人电话" width="0" align="left" />
          <el-table-column prop="carnumber" label="车牌号" width="0" align="left" />
          <el-table-column prop="qrcode" label="二维码" width="0" align="left" />
          <el-table-column prop="calluer" label="被访者姓名" width="0" align="left" />
          <el-table-column prop="calldepartnam" label="被访者部门" width="0" align="left" />
          <el-table-column prop="callmobile" label="被访者联系电话" width="0" align="left" />
          <el-table-column prop="time" label="来访时间" width="0" align="left" />
          <!-- <el-table-column prop="sts" label="是否同意来访" width="0" align="left" /> -->
          <el-table-column label="是否同意来访" align="left">
            <template slot-scope="scope">
             <span v-if="scope.row.sts=='拒绝'" style="color: #ff3a3a;">{{scope.row.sts}}</span>
             <span v-else style="color: #1890ff;">{{scope.row.sts}}</span>
            </template>
          </el-table-column>

          <el-table-column prop="reason" label="拒绝理由" width="0" align="left" />
          <el-table-column label="操作" fixed="right" width="100">
            <template slot-scope="scope">
              <!-- <el-button type="text" @click="addOrUpdateHandle(scope.row.id)" v-show="false">编辑</el-button>
              <el-button type="text" class="JNPF-table-delBtn" @click="handleDel(scope.row.id)" v-show="false">删除
              </el-button> -->
              <el-button type="text"  @click="passvisitm(scope.row)"
                v-show="scope.row.sts==null">同意</el-button>
              <el-button type="text" class="JNPF-table-delBtn" @click="nopassvisitm(scope.row)" v-show="scope.row.sts==null">拒绝</el-button>
            </template>
          </el-table-column>
        </JNPF-table>
        <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
          @pagination="initData" />
      </div>
    </div>
    <JNPF-Form v-if="formVisible" ref="JNPFForm" @refresh="refresh" />
    <ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
    <Detail v-if="detailVisible" ref="Detail" @refresh="detailVisible=false" />
  </div>
</template>

<script>
  import request from '@/utils/request'
  import {
    getDictionaryDataSelector
  } from '@/api/systemData/dictionary'
  import JNPFForm from './Form'
  import ExportBox from './ExportBox'
  import {
    getDataInterfaceRes
  } from '@/api/systemData/dataInterface'
  import Detail from './Detail'
  import {
    passvisit,
    nopassvisit
  } from '@/api/autorequest'

  export default {
    components: {
      JNPFForm,
      ExportBox,
      Detail
    },
    data() {
      return {
        detailVisible: false,
        query: {
          visituser: undefined,
          visitcompany: undefined,
          calluer: undefined,
        },
        treeProps: {
          children: 'children',
          label: 'fullName',
          value: 'id'
        },
        list: [],
        listLoading: true,
        total: 0,
        listQuery: {
          currentPage: 1,
          pageSize: 20,
          sort: "desc",
          sidx: "",
        },
        formVisible: false,
        exportBoxVisible: false,
        columnList: [{
            prop: 'visitname',
            label: '来访事由'
          },
          {
            prop: 'visitcompany',
            label: '来访单位'
          },
          {
            prop: 'visituser',
            label: '来访人员姓名'
          },
          {
            prop: 'intime',
            label: '入闸时间'
          },
          {
            prop: 'mobile',
            label: '来访联系人电话'
          },
          {
            prop: 'outtime',
            label: '出闸时间'
          },
          {
            prop: 'qrcode',
            label: '二维码'
          },
          {
            prop: 'calluer',
            label: '被访者姓名'
          },
          {
            prop: 'callusrid',
            label: '被访者姓名ID'
          },
          {
            prop: 'calldepartid',
            label: '被访者部门ID'
          },
          {
            prop: 'calldepartnam',
            label: '被访者部门'
          },
          {
            prop: 'callmobile',
            label: '被访者联系电话'
          },
          {
            prop: 'time',
            label: '来访时间'
          },
          {
            prop: 'sts',
            label: '是否同意来访'
          },
          {
            prop: 'reason',
            label: '备注'
          },
        ],
      }
    },
    computed: {
      menuId() {
        return this.$route.meta.modelId || ''
      }
    },
    created() {
      this.initData()
    },
    methods: {
      passvisitm(row) {
        this.$confirm('确定接收来自【' + row.calluer + '】的拜访?', '处理请求', {
          confirmButtonText: '接收',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          passvisit(row.id).then(res => {
            this.$message({
              type: 'success',
              message: res.msg
            });
            this.initData()
          })

        }).catch(() => {

        });
      },
      nopassvisitm(row) {
        this.$prompt('请输入拒绝理由', '拒绝拜访', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({
          value
        }) => {
          let dats = new FormData()
          dats.append('reason', value);
          nopassvisit({
            'id': row.id,
            'reason': value
          }).then(res => {
            this.$message({
              type: 'success',
              message: res.msg
            });
            this.initData()
          })
        });
      },
      goDetail(id) {
        this.detailVisible = true
        this.$nextTick(() => {
          this.$refs.Detail.init(id)
        })
      },
      sortChange({
        column,
        prop,
        order
      }) {
        this.listQuery.sort = order == 'ascending' ? 'asc' : 'desc'
        this.listQuery.sidx = !order ? '' : prop
        this.initData()
      },
      initData() {
        this.listLoading = true;
        let _query = {
          ...this.listQuery,
          ...this.query,
          menuId: this.menuId
        };
        request({
          url: `/api/example/BusVisit/getList`,
          method: 'post',
          data: _query
        }).then(res => {
          var _list = [];
          for (let i = 0; i < res.data.list.length; i++) {
            let _data = res.data.list[i];
            _list.push(_data)
          }
          this.list = _list
          this.total = res.data.pagination.total

          this.listLoading = false
        })
      },
      handleDel(id) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          type: 'warning'
        }).then(() => {
          request({
            url: `/api/example/BusVisit/${id}`,
            method: 'DELETE'
          }).then(res => {
            this.$message({
              type: 'success',
              message: res.msg,
              onClose: () => {
                this.initData()
              }
            });
          })
        }).catch(() => {});
      },
      addOrUpdateHandle(id, isDetail) {
        this.formVisible = true
        this.$nextTick(() => {
          this.$refs.JNPFForm.init(id, isDetail)
        })
      },
      exportData() {
        this.exportBoxVisible = true
        this.$nextTick(() => {
          this.$refs.ExportBox.init(this.columnList)
        })
      },
      download(data) {
        let query = {
          ...data,
          ...this.listQuery,
          ...this.query,
          menuId: this.menuId
        }
        request({
          url: `/api/example/BusVisit/Actions/Export`,
          method: 'GET',
          data: query
        }).then(res => {
          if (!res.data.url) return
          this.jnpf.downloadFile(res.data.url)
          this.$refs.ExportBox.visible = false
          this.exportBoxVisible = false
        })
      },
      search() {
        this.listQuery = {
          currentPage: 1,
          pageSize: 20,
          sort: "desc",
          sidx: "",
        }
        this.initData()
      },
      refresh(isrRefresh) {
        this.formVisible = false
        if (isrRefresh) this.reset()
      },
      reset() {
        for (let key in this.query) {
          this.query[key] = undefined
        }
        this.search()
      }
    }
  }

</script>
